<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram of Wave Propagation</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  canvas {
    border: 1px solid #ccc;
  }
</style>
</head>
<body>

<canvas id="physicsCanvas" width="600" height="400"></canvas>

<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// Helper function to draw an arrow
function drawArrow(ctx, fromX, fromY, toX, toY, headLength = 10) {
    const dx = toX - fromX;
    const dy = toY - fromY;
    const angle = Math.atan2(dy, dx);
    ctx.moveTo(fromX, fromY);
    ctx.lineTo(toX, toY);
    ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
    ctx.moveTo(toX, toY);
    ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
}

// Set global styles
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.lineWidth = 1.5;
ctx.font = 'italic 22px "Times New Roman"';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// --- Main Drawing ---

// Define coordinates
const yAxis = 180;
const xStart = 50;
const xEnd = 550;
const pointN_x = 150;
const pointM_x = 400;

// 1. Draw the x-axis
ctx.beginPath();
drawArrow(ctx, xStart, yAxis, xEnd, yAxis);
ctx.stroke();
ctx.font = '22px "Times New Roman"';
ctx.fillText('x/m', xEnd + 20, yAxis + 5);

// 2. Draw points N and M
ctx.beginPath();
ctx.arc(pointN_x, yAxis, 4, 0, 2 * Math.PI);
ctx.fill();

ctx.beginPath();
ctx.arc(pointM_x, yAxis, 4, 0, 2 * Math.PI);
ctx.fill();

// 3. Add labels for N and M
ctx.font = '24px "Times New Roman"';
ctx.fillText('N', pointN_x, yAxis + 25);
ctx.fillText('M', pointM_x, yAxis + 25);

// 4. Draw the distance marker
const yDistLine = yAxis + 55;
const yTickEnd = yAxis + 60;
// Vertical ticks
ctx.beginPath();
ctx.moveTo(pointN_x, yAxis);
ctx.lineTo(pointN_x, yTickEnd);
ctx.moveTo(pointM_x, yAxis);
ctx.lineTo(pointM_x, yTickEnd);
ctx.stroke();

// Double-headed arrow for distance
ctx.beginPath();
drawArrow(ctx, pointM_x, yDistLine, pointN_x, yDistLine);
ctx.moveTo(pointN_x, yDistLine); // Reposition for the second arrowhead
drawArrow(ctx, pointN_x, yDistLine, pointM_x, yDistLine);
ctx.stroke();

// Distance label
ctx.font = '22px "Times New Roman"';
ctx.fillText('5 m', (pointN_x + pointM_x) / 2, yDistLine - 20);

// 5. Draw the velocity vector 'u'
const yVel = yAxis - 60;
const xVelStart = 320;
const xVelEnd = 250;
ctx.lineWidth = 2; // Make velocity arrow slightly thicker
ctx.beginPath();
drawArrow(ctx, xVelStart, yVel, xVelEnd, yVel, 12);
ctx.stroke();
ctx.lineWidth = 1.5; // Reset line width

// Velocity label 'u'
ctx.font = 'italic 24px "Times New Roman"';
ctx.fillText('u', xVelStart + 20, yVel);

// 6. Add the bottom caption
ctx.font = '28px "KaiTi", "SimSun"';
ctx.fillStyle = '#333';
ctx.fillText('习题 11-6 图', canvas.width / 2, 350);

</script>

</body>
</html>